<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<script src="../../js/vue.js"></script>
	<!-- 引入样式 -->
	<link rel="stylesheet" href="../../elmentui/elmentui.css">
	<!-- 引入组件库 -->
	<script src="../../elmentui/elmentui.js"></script>
	<!-- 引入axios网络传输库 -->
	<script src="../../elmentui/axios.min.js"></script>
	<!--解决axios跨域无法传递form表单数据到后台实体类的问题-->
	<script src="../../elmentui/qs.min.js"></script>
	<style>
		.el-input__inner{
			width: 500px;

		}
	</style>
</head>
<body>
<div id="app">
	<!-- 查询条件布局 -->
	<el-form :inline="true" :model="userInfo" class="demo-form-inline" style=" text-align: center;">
		<el-row>
			<el-col :span="10" >
				<el-form-item label="姓名">
					<el-input  v-model="userInfo.username" placeholder="姓名"></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="10" >
				<el-form-item label="年龄">
					<el-input v-model="userInfo.userage" placeholder="年龄"></el-input>
				</el-form-item>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="10">
				<el-form-item label="地址">
					<el-input v-model="userInfo.useraddress" placeholder="地址"></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="10">
				<el-form-item label="邮箱">
					<el-input v-model="userInfo.usereamail" placeholder="邮箱"></el-input>
				</el-form-item>
			</el-col>
		</el-row>

		<el-row>
			<el-button type="primary"  @click="onSelect" style="margin-right: 30px;">查询</el-button>
			<el-button type="success"  @click="onAdd" style="margin-right: 30px;">新增</el-button>
			<el-button type="info">重置</el-button>
		</el-row>

	</el-form>
	<!-- 信息列表展示 -->
	<el-table
			ref="multipleTable"
			:data="userinfoes"
			tooltip-effect="dark"
			style="width: 100%"
			@selection-change="handleSelectionChange">
		<el-table-column
				type="selection"
				width="55">
		</el-table-column>
		<el-table-column
				type="index"
				width="50">
		</el-table-column>
		<el-table-column
				prop="username"
				label="姓名"
				width="120">
		</el-table-column>
		<el-table-column
				prop="useraddress"
				label="地址"
				show-overflow-tooltip>
		</el-table-column>
		<el-table-column
				prop="userage"
				label="年龄"
				show-overflow-tooltip>
		</el-table-column>
		<el-table-column
				prop="usereamail"
				label="邮箱"
				show-overflow-tooltip>
		</el-table-column>
		<el-table-column
				fixed="right"
				label="操作"
				width="100">
			<template slot-scope="scope">
				<el-button @click="useredit(scope.row)" type="text" size="small">编辑</el-button>
				<el-button type="text" size="small" @click="userdelete(scope.row)" >删除</el-button>
			</template>
		</el-table-column>
	</el-table>
	<!-- 新增或编辑的模态框 -->
	<el-dialog
			title="提示"
			:visible.sync="dialogVisible"
			width="650px"
			:before-close="handleClose">
		<!-- 模态框展示信息 -->
		<el-form  label-width="80px" :model="editUserInfo">
			<el-form-item label="姓名">
				<el-input v-model="editUserInfo.username"></el-input>
			</el-form-item>
			<el-form-item label="密码">
				<el-input v-model="editUserInfo.userpwd"></el-input>
			</el-form-item>
			<el-form-item label="年龄">
				<el-input v-model="editUserInfo.userage"></el-input>
			</el-form-item>
			<el-form-item label="地址">
				<el-input v-model="editUserInfo.useraddress"></el-input>
			</el-form-item>
			<el-form-item label="邮箱">
				<el-input v-model="editUserInfo.usereamail"></el-input>
			</el-form-item>
		</el-form>
		<!-- 模态框展示信息完毕 -->
		<span slot="footer" class="dialog-footer">
			<el-button @click="dialogVisible = false">取 消</el-button>
			<el-button type="primary" @click="addOrUpdateUser">确 定</el-button>
		  </span>
	</el-dialog>


</div>
<script>
	var app=new Vue({
		el:"#app",
		data:{
			userInfo:{
				username:"",
				userage:"",
				useraddress:"",
				usereamail:""
			},
			userinfoes:[],
			dialogVisible:false,
			editUserInfo:{
				id:null,
				username:"",
				userpwd:"",
				userage:"",
				useraddress:"",
				usereamail:""
			}


		},
		methods:{
			onSelect:function(){

				var ps=Qs.stringify(this.userBean);
				var that=this;
				axios.post('http://localhost:8086/nsd_springbootvue1007server/queryUserInfo', ps)
						.then(function (response) {
							console.log(response);
							that.userinfoes=response.data;
						})
						.catch(function (error) {
							console.log(error);
						});

			},
			onAdd:function(){
				this.dialogVisible=true;
				// 当点击新增按钮时，需要清空表单数据
				this.editUserInfo={
					id:null,
					username:"",
					userpwd:"",
					userage:"",
					useraddress:"",
					usereamail:""
				}

			},
			handleSelectionChange:function(){

			},
			addOrUpdateUser:function(){
				var ps=Qs.stringify(this.editUserInfo);
				var that=this;
				axios.post('http://localhost:8086/nsd_springbootvue1007server/addOrUpdateUser', ps)
						.then(function (response) {
							console.log(response);
							that.dialogVisible=false;
							that.onSelect();




						})
						.catch(function (error) {
							console.log(error);
						});






			},
			useredit:function(eidtUserInfoOne){
				this.dialogVisible=true;
				// 提取单条信息映射在表单中；eidtUserInfoOne点击编辑时所传递进来的参数，每行信息
				this.editUserInfo=Object.assign({},eidtUserInfoOne)
			},
			handleClose:function(done){
				var that=this;
				this.$confirm('确认关闭？')
						.then(_ => {
							done();
							that.dialogVisible=false;
						})
						.catch(_ => {});
			},



		}
	})



</script>

</body>
</html>
